<!--
 * @message: echarts组件
-->
<template>
  <div ref="main"
       :style="{width:width,height:height}">
  </div>
</template>
<script>
export default {
  props: {
    width: {
      type: String,
      required: false,
      default: '0px'
    },
    height: {
      type: String,
      required: false,
      default: '0px'
    },
    option: {
      type: Object,
      required: false,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
    }
  },
  components: {

  },
  created () {
  },
  mounted () {
    this.reviewEcharts(this.option)
  },
  methods: {
    reviewEcharts (option) {
      const echarts = require('echarts')
      const myEcharts = echarts.init(this.$refs.main)
      myEcharts.clear()
      myEcharts.setOption(option)
      window.addEventListener('resize', () => {
        // 自动渲染echarts
        myEcharts.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
@media (max-width: 767px) {
  /* <=767的设备 */
  #myecharts {
    min-width: 500px;
    height: 200px;
  }
}
@media (min-width: 768px) {
  /* >=768的设备 */
  #myecharts {
    width: 100%;
    height: 300px;
  }
}
@media (min-width: 992px) {
  /* >=992的设备 */
  #myecharts {
    width: 100%;
    height: 400px;
  }
}
@media (min-width: 1200) {
  /* >=1200的设备 */
  #myecharts {
    width: 100%;
    height: 500px;
  }
}
</style>
